const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')

module.exports = {
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|jpeg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024,
          },
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin(),
  ],
  resolve: {
    /**
     * alias 为路径创建别名，用于简化路径
     * 例如常用资源存放在很长的路径下，可将路径中的公共部分提取出来，简化使用
     * 下例可以在项目中import require 会将 @assets/xxx 识别为 /src/assets/xxx
     * 注意：配置的路径必须是 绝对路径
     */
    alias: {
      '@assets': path.join(__dirname, './src/assets/'),
    },
    /**
     * extensions 自动解析确定的扩展
     * 当import require的模块路径没有文件后缀时，会自动带上后缀尝试访问文件是否存在
     * 一般将范围更大的放在前面。
     * 默认:['.js', '.json']
     * 所以webpack使用ESM import导入模块时，可以省略.js后缀
     * css文件中使用的图片等文件也可以省略后缀，但一般不处理css中的资源
     */
    extensions: ['.js', '.json', '.css', '.jpeg'],
    /**
     * modules 告诉webpack解析模块时应该搜索的目录
     * 当导入模块的路径以“字母”开头：例如'lodash' 'lodash/fp'
     * webpack就会从modules指定的目录下寻找
     * 当模块的路径是相对路径，就不会在modules的目录中寻找
     * 默认：['node_modules']
     * css中使用的图片不会对这个属性生效
     * 因为当css中使用字母开头的路径时，默认会被添加'./'当前目录前缀
     * 所以webpack会将它识别为一个相对路径
     */
    modules: ['./src/assets', 'node_modules'],
  },
}
